<template>
  <div class="seckill">
    <div class="seckill-item">
      <div class="item-left">
        <div class="item-content">
          <ul>
            <li class="content-title">百亿补贴</li>
            <li class="content-text">企业百补 全程保障</li>
            <li class="content-button">
              <span>查看</span>
            </li>
          </ul>
        </div>
        <div class="item-left-img">
          <img src="@/assets/images/13.png" alt="logo" />
        </div>
      </div>
    </div>
    <div class="seckill-item">
      <div class="item-left">
        <div class="item-content">
          <ul>
            <li class="content-title">企业专享价</li>
            <li class="content-text">企业专享 低至五折</li>
            <li class="content-button">
              <span>查看</span>
            </li>
          </ul>
        </div>
        <div class="item-left-img">
          <img src="@/assets/images/15.jpg" alt="logo" />
        </div>
      </div>
    </div>
    <div class="seckill-item">
      <div class="item-left">
        <div class="item-content">
          <ul>
            <li class="content-title">企业秒杀</li>
            <li class="content-text">
              <span>18：00</span>
              点场，距结束：
            </li>
            <li class="content-button-time">
              <span>00</span>
              <i>:</i>
              <span>00</span>
              <i>:</i>
              <span>00</span>
            </li>
          </ul>
        </div>
        <div class="item-left-img">
          <img src="@/assets/images/14.jpg" alt="logo" />
        </div>
      </div>
    </div>
    <div class="seckill-item">
      <div class="item-left">
        <div class="item-content">
          <ul>
            <li class="content-title">企业阶梯价</li>
            <li class="content-text">多买多优惠</li>
            <li class="content-button">
              <span>查看</span>
            </li>
          </ul>
        </div>
        <div class="item-left-img">
          <img src="@/assets/images/13.jpg" alt="logo" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.seckill {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: 1rem;
  max-width: 74.375rem;
  margin: 1rem auto;

  .seckill-item {
    border-radius: 0.25rem;
    padding: 0.75rem 1.1875rem 1.1875rem;
    background: linear-gradient(
      90.34deg,
      #ffebe1 -64.08%,
      #ffede3 -39.65%,
      #fff 68.59%
    );
    cursor: pointer;

    .item-left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;

      .item-content {
        .content-title {
          font-size: 1.25rem;
          font-weight: 700;
        }

        .content-text {
          font-size: 0.75rem;
          margin: 0.75rem 0;
          color: rgba(0, 0, 0, 0.45);

          span {
            font-size: 0.875rem;
            font-weight: 700;
            color: #000000;
          }
        }

        .content-button {
          width: 5rem;
          height: 1.75rem;
          text-align: center;
          border: 0.0625rem solid rgba(0, 0, 0, 0.85);
          border-radius: 0.25rem;
          color: rgba(0, 0, 0, 0.85);
          cursor: pointer;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            border: 0.0625rem solid red;
            color: red;
          }
        }

        .content-button-time {
          display: flex;
          align-items: stretch;
        }

        .content-button-time > span {
          padding: 0.3125rem;
          width: 1.75rem;
          background: rgba(0, 0, 0, 0.85);
          border-radius: 0.125rem;
          color: #fff;
          text-align: center;
        }

        .content-button-time > i {
          margin: 0 0.5rem;
          color: rgba(0, 0, 0, 0.85);
          display: flex;
          align-items: center;
        }
      }

      .item-left-img {
        line-height: 7.5rem;

        img {
          width: 6.875rem;
          height: 6.875rem;
          cursor: pointer;
          background-color: #ebebeb;
          object-fit: cover;
        }
      }
    }
  }
}

/* 响应式断点 */
@media (max-width: 1200px) {
  .seckill {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .seckill {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .seckill .seckill-item .item-left .item-left-img img {
    width: 5.5rem;
    height: 5.5rem;
  }

  .seckill .seckill-item .item-left .item-content .content-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .seckill {
    grid-template-columns: 1fr;
  }

  .seckill .seckill-item .item-left {
    flex-direction: column;
    text-align: center;
  }

  .seckill .seckill-item .item-left .item-left-img {
    margin-top: 0.5rem;
    line-height: normal;
  }
}
</style>
